import React, { Component } from 'react'
import styled from 'styled-components'

export default class App extends Component {
  render() {
    const Mystyle = styled.ul`    //格式   const 变量名 = styled.标签名
      background-color: red;
      margin:0;
      padding:0;
      display:flex;
      position:fixed;
      bottom:0;
      width:100%;
      li{
        flex:1;
        list-style:none;
        text-align:center;
      }
      li:hover{
        background-color:yellow
      }
    `
    return (
      <Mystyle>      {/*  用上方变量名在此处代替原标签名  */}
        <li>111</li>
        <li>222</li>
        <li>333</li>
      </Mystyle>
    )
  }
}
